<template>
    <div class="configuration">
        <div class="header">
            <el-form ref="form" :model="searchForm" label-suffix=":" label-width="80">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="内容形式">
                            <el-select v-model="value" placeholder="全部">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发布时间">
                            <el-date-picker v-model="value" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属类别">
                            <el-select v-model="value" placeholder="全部">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </div>
        <el-button type="primary" size="small" style="margin-bottom:5px;" @click="dialogVisible = true">新增</el-button>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleSee(scope.row)">查看</el-button>
                    <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small"
                        @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 查看 -->
        <el-drawer :visible.sync="drawer" :with-header="false">
            <div>日期：<span>{{ information.date }}</span></div>
            <div>姓名：<span>{{ information.name }}</span></div>
            <div>地址：<span>{{ information.address }}</span></div>
        </el-drawer>
        <!-- 新增 -->
        <el-dialog title="新增" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :model="ruleForm"  ref="ruleForm" label-width="100px">
                <el-form-item label="名称:" prop="name">
                    <el-input style="width: 80%" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="footer">
                        <el-button class="save-btn" type="primary" @click="submitForm('ruleForm')">保存</el-button>

                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="dialogVisibleEdit" width="30%" :before-close="handleClose">
            <el-form :model="editForm"  ref="editForm" label-width="100px">
                <el-form-item label="名称:" prop="name">
                    <el-input style="width: 80%" v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="地址:" prop="address">
                    <el-input style="width: 80%" v-model="editForm.address"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="footer">
                        <el-button class="save-btn" type="primary" @click="submitEditForm('ruleForm')">保存</el-button>

                        <el-button @click="resetEditForm('ruleForm')">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "configuration",
    data() {
        return {
            dialogVisible: false,
            dialogVisibleEdit: false,
            drawer: false,
            searchForm: {},
            ruleForm:{
                name:""
            },
            editForm:{
                name:"",
                address:""
            },
            value: "",
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            information: {
                name: "",
                date: "",
                address: ""
            }
        }
    },
    methods: {
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        handleSee(item) {
            console.log('tag', item)
            this.drawer = true;
            this.information = item
        },
        handleEdit(item) {
            console.log('tag', item)
            this.dialogVisibleEdit = true;
            this.editForm = item
        },
        handleClose() {
            this.dialogVisible = false;
            this.dialogVisibleEdit = false;
        },
        submitForm(val){
            console.log('tag', val)
            this.dialogVisible = false;
        },
        resetForm(val){
            this.dialogVisible = false;
        },
        submitEditForm(val){
            console.log('tag', val)
            this.dialogVisibleEdit = false;
        },
        resetEditForm(val){
            this.dialogVisibleEdit = false;
        }
    }
}
</script>

<style scoped></style>